<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='stylesheets/style.css' />
	
    <link rel="stylesheet" type="text/css" href="stylesheets/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="stylesheets/themes/icon.css">
	<script type="text/javascript" src="javascripts/jquery.min.js"></script>
	<script type="text/javascript" src="javascripts/jquery.easyui.min.js"></script>
  </head>
  <body  class="easyui-layout">
    <!-- <h1><%= title %></h1>
    <p>Welcome to <%= title %></p> -->
		<div data-options="region:'north',split:true" style="height:50px;">
				<div class="easyui-panel" style="padding:5px;">
						<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
						<a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
						<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
						<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
					</div>
					<div id="mm1" style="width:150px;">
						<div data-options="iconCls:'icon-undo'">Undo</div>
						<div data-options="iconCls:'icon-redo'">Redo</div>
						<div class="menu-sep"></div>
						<div>Cut</div>
						<div>Copy</div>
						<div>Paste</div>
						<div class="menu-sep"></div>
						<div>
							<span>Toolbar</span>
							<div>
								<div>Address</div>
								<div>Link</div>
								<div>Navigation Toolbar</div>
								<div>Bookmark Toolbar</div>
								<div class="menu-sep"></div>
								<div>New Toolbar...</div>
							</div>
						</div>
						<div data-options="iconCls:'icon-remove'">Delete</div>
						<div>Select All</div>
					</div>
					<div id="mm2" style="width:100px;">
						<div data-options="iconCls:'icon-ok'">Ok</div>
						<div data-options="iconCls:'icon-cancel'">Cancel</div>
					</div>
					<div id="mm3" style="width:150px;">
						<div>Help</div>
						<div>Update</div>
						<div>
							<span>About</span>
							<div class="menu-content" style="padding:10px;text-align:left">
								<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
								<p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
							</div>
						</div>
					</div>
		</div>
		<div data-options="region:'west',title:'West',split:true" style="width:200px;">
				<div id="aa" class="easyui-accordion" style="width:300px;">
						<div title="Title1" data-options="selected:true"  style="overflow:auto;padding:10px;">
							<a href="#" data-link='users.html'>用户管理</a><br>
							<a href="#" data-link='users.html'>新闻管理</a><br>
							<a href="#" data-link='users.html'>分类管理</a><br>
							<a href="#" data-link='users.html'>用户管理</a>

						</div>
						<div title="Title2"style="padding:10px;">
							content2
						</div>
						<div title="Title3"style="padding:10px;">
							content3
						</div>
					</div>
		</div>
		<div data-options="region:'center',title:'center title'" style="background:#eee;">
				<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'">
					</div>

		</div>
		<script>
			$('#aa a').click(function(){
				console.log($(this).attr('data-link'));
            $('#tt').tabs('add',{	
                title: $(this).html(),
                content: '<iframe scrolling="auto" frameborder="0" style="width:100%;height:550px;" src="'+$(this).attr('data-link')+'"></iframe>',
                closable: true
            });
	})
		</script>
  </body>
</html>
